<template>
  <view class="message-container">
    <!-- 个人信息区域 -->
    <view class="user-info-section">
      <view class="user-avatar" @click="toggleSidebar">
        <image class="avatar" :src="userAvatar" mode="aspectFill" />
        <view class="online-status" :style="{ backgroundColor: isWebSocketConnected ? '#52c41a' : '#ff4d4f' }"></view>
      </view>
      <view class="user-details">
        <text class="username">{{ userName }}</text>
        <text class="status" :style="{ color: isWebSocketConnected ? '#52c41a' : '#ff4d4f' }">
          {{ isWebSocketConnected ? '在线' : '离线' }}
        </text>
      </view>
      <view class="user-actions">
        <view class="action-btn" @click="toggleDropdown">
          <text class="plus-icon">+</text>
        </view>
        <!-- 下拉菜单 -->
         <view class="dropdown-menu" v-if="showDropdown">
           <view class="dropdown-item" @click="addFriend">
             <text class="dropdown-icon">👤</text>
             <text class="dropdown-text">添加好友</text>
           </view>
           <view class="dropdown-item" @click="createGroup">
             <text class="dropdown-icon">👥</text>
             <text class="dropdown-text">创建群聊</text>
           </view>
           <view class="dropdown-item" @click="driftBottle">
             <text class="dropdown-icon">🍃</text>
             <text class="dropdown-text">漂流瓶</text>
           </view>
         </view>
      </view>
    </view>

    <!-- 聊天列表 -->
    <view class="chat-list">
      <!-- 加载状态 -->
      <view class="loading-container" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-container" v-else-if="chatList.length === 0">
        <text class="empty-text">暂无会话</text>
        <text class="empty-hint">快去添加好友开始聊天吧！</text>
      </view>
      
      <!-- 聊天列表 -->
      <view class="chat-item" v-for="(chat, index) in chatList" :key="chat.id" @click="openChat(chat)" @longpress="showDeleteMenu(chat, $event)">
        <view class="chat-avatar">
          <image class="avatar" :src="chat.avatar" mode="aspectFill" />
          <view class="unread-badge" v-if="chat.unreadCount > 0">
            <text class="badge-text">{{ chat.unreadCount > 99 ? '99+' : chat.unreadCount }}</text>
          </view>
        </view>
        <view class="chat-content">
          <view class="chat-header">
            <text class="chat-name">{{ chat.name }}</text>
            <text class="chat-time">{{ chat.time }}</text>
          </view>
          <view class="chat-preview">
            <text class="last-message">{{ chat.lastMessage }}</text>
          </view>
        </view>
        <!-- 删除菜单 -->
        <view class="delete-menu" v-if="showDeleteDropdown && selectedChat?.id === chat.id" @click.stop>
          <view class="delete-item" @click="deleteConversation(chat)">
            <text class="delete-icon">🗑️</text>
            <text class="delete-text">删除会话</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 侧边栏遮罩 -->
    <view class="sidebar-overlay" v-if="showSidebar" @click="closeSidebar"></view>
    
    <!-- 侧边栏 -->
    <view class="sidebar" :class="{ 'sidebar-open': showSidebar }">
      <view class="sidebar-header">
        <view class="sidebar-avatar">
          <image class="avatar" :src="userAvatar" mode="aspectFill" />
        </view>
        <view class="sidebar-user-info">
          <text class="sidebar-username">{{ userName }}</text>
          <text class="sidebar-email">{{ userInfo?.email || '' }}</text>
        </view>
      </view>
      
      <view class="sidebar-content">
        <view class="sidebar-item" @click="editProfile">
          <text class="sidebar-icon">👤</text>
          <text class="sidebar-text">编辑个人信息</text>
          <text class="sidebar-arrow">></text>
        </view>
        
        <view class="sidebar-item" @click="changePassword">
          <text class="sidebar-icon">🔒</text>
          <text class="sidebar-text">修改密码</text>
          <text class="sidebar-arrow">></text>
        </view>
        
        <view class="sidebar-item" @click="settings">
          <text class="sidebar-icon">⚙️</text>
          <text class="sidebar-text">设置</text>
          <text class="sidebar-arrow">></text>
        </view>
        
        <view class="sidebar-divider"></view>
        
        <view class="sidebar-item logout" @click="logout">
          <text class="sidebar-icon">🚪</text>
          <text class="sidebar-text">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { AuthUtils, getUserStatusText, getUserStatusColor } from '@/utils/auth'
import { MessageAPI } from '@/utils/api'
import { websocketManager } from '@/utils/websocket'
import type { Conversation, ChatItem } from '@/types/conversation'

// 用户信息
const userInfo = ref(AuthUtils.getUserInfo())

// 计算属性：用户头像
const userAvatar = computed(() => {
  return userInfo.value?.avatar || '/static/logo.png'
})

// 计算属性：用户昵称
const userName = computed(() => {
  return userInfo.value?.nickName || '未登录'
})

// 计算属性：用户状态文本
const userStatusText = computed(() => {
  return userInfo.value ? getUserStatusText(userInfo.value.status) : '离线'
})

// 计算属性：用户状态颜色
const userStatusColor = computed(() => {
  return userInfo.value ? getUserStatusColor(userInfo.value.status) : '#d9d9d9'
})

// 时间格式化工具函数
const formatTime = (timeString: string): string => {
  const messageTime = new Date(timeString)
  const now = new Date()
  const diffMs = now.getTime() - messageTime.getTime()
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) {
    // 今天，显示时分
    return messageTime.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit',
      hour12: false 
    })
  } else if (diffDays === 1) {
    // 昨天
    return '昨天'
  } else if (diffDays < 7) {
    // 一周内，显示星期
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    return weekdays[messageTime.getDay()]
  } else {
    // 超过一周，显示月日
    return messageTime.toLocaleDateString('zh-CN', { 
      month: '2-digit', 
      day: '2-digit' 
    })
  }
}

// 会话数据转换为聊天列表项
const convertToChat = (conversation: Conversation): ChatItem => {
  return {
    id: conversation.id,
    name: conversation.otherUserNickName,
    avatar: conversation.otherUserAvatar || '/static/logo.png',
    lastMessage: conversation.lastMessage,
    time: formatTime(conversation.lastMessageTime),
    unreadCount: 0, // 暂时设为0，后续可以从API获取
    otherUserId: conversation.otherUserId
  }
}

// 聊天列表数据
const chatList = ref<ChatItem[]>([])
const loading = ref(false)

// WebSocket相关状态
const isWebSocketConnected = ref(false)

// WebSocket监听器清理函数
let messageUnsubscribe: (() => void) | null = null
let connectionUnsubscribe: (() => void) | null = null
let errorUnsubscribe: (() => void) | null = null

// 加载会话列表
const loadConversations = async () => {
  try {
    loading.value = true
    const response = await MessageAPI.getConversations()
    
    if (response.code === 200 && response.data?.conversations) {
      // 转换数据格式
      chatList.value = response.data.conversations.map(convertToChat)
    } else {
      console.error('获取会话列表失败:', response.message)
      uni.showToast({
        title: response.message || '获取会话列表失败',
        icon: 'none'
      })
    }
  } catch (error: any) {
    console.error('加载会话列表错误:', error)
    uni.showToast({
      title: error.message || '网络错误',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 初始化WebSocket连接和监听器
const initWebSocket = async () => {
  try {
    // 监听连接状态
    connectionUnsubscribe = websocketManager.onConnection((connected) => {
      isWebSocketConnected.value = connected
      if (connected) {
        console.log('消息页面：WebSocket连接成功')
      } else {
        console.log('消息页面：WebSocket连接断开')
      }
    })

    // 监听错误
    errorUnsubscribe = websocketManager.onError((error) => {
      console.error('消息页面：WebSocket错误:', error)
    })

    // 监听新消息（用于更新会话列表）
    messageUnsubscribe = websocketManager.onMessage((message) => {
      console.log('消息页面：收到新消息:', message)
      handleNewMessage(message)
    })

    // 获取当前连接状态
    isWebSocketConnected.value = websocketManager.getConnectionStatus()
    
  } catch (error) {
    console.error('消息页面：WebSocket初始化失败:', error)
  }
}

// 处理新消息（更新会话列表）
const handleNewMessage = (message: any) => {
  // 查找对应的会话
  const conversationIndex = chatList.value.findIndex(
    chat => chat.id.toString() === message.conversationId.toString()
  )

  if (conversationIndex >= 0) {
    // 更新现有会话的最后消息和时间
    const chat = chatList.value[conversationIndex]
    chat.lastMessage = message.content
    chat.time = formatTime(message.createdAt)
    
    // 如果不是自己发送的消息，增加未读数
    if (message.senderId !== userInfo.value?.userId) {
      chat.unreadCount = (chat.unreadCount || 0) + 1
    }
    
    // 将该会话移到列表顶部
    chatList.value.splice(conversationIndex, 1)
    chatList.value.unshift(chat)
  } else {
    // 新会话，重新加载会话列表
    loadConversations()
  }
}

// 页面加载时检查登录状态并加载数据
onMounted(async () => {
  if (!AuthUtils.isLoggedIn()) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login'
      })
    }, 1500)
    return
  }
  
  // 刷新用户信息
  userInfo.value = AuthUtils.getUserInfo()
  
  // 初始化WebSocket
  initWebSocket()
  
  // 加载会话列表
  await loadConversations()
})

// 页面卸载时清理资源
onUnmounted(() => {
  // 清理监听器
  if (messageUnsubscribe) {
    messageUnsubscribe()
    messageUnsubscribe = null
  }
  if (connectionUnsubscribe) {
    connectionUnsubscribe()
    connectionUnsubscribe = null
  }
  if (errorUnsubscribe) {
    errorUnsubscribe()
    errorUnsubscribe = null
  }
})

// 下拉菜单状态
const showDropdown = ref(false)
// 侧边栏状态
const showSidebar = ref(false)
// 删除菜单状态
const showDeleteDropdown = ref(false)
const selectedChat = ref<ChatItem | null>(null)

// 切换下拉菜单
const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
  // 关闭删除菜单
  showDeleteDropdown.value = false
  selectedChat.value = null
}

// 切换侧边栏
const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value
  // 关闭下拉菜单
  showDropdown.value = false
  // 关闭删除菜单
  showDeleteDropdown.value = false
  selectedChat.value = null
}

// 关闭侧边栏
const closeSidebar = () => {
  showSidebar.value = false
}

// 编辑个人信息
const editProfile = () => {
  closeSidebar()
  uni.navigateTo({
    url: '/pages/profile'
  })
}

// 修改密码
const changePassword = () => {
  closeSidebar()
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 设置
const settings = () => {
  closeSidebar()
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 退出登录
const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        AuthUtils.logout()
        uni.reLaunch({
          url: '/pages/login'
        })
      }
    }
  })
  closeSidebar()
}

// 添加好友
const addFriend = () => {
  console.log('添加好友')
  showDropdown.value = false
  uni.navigateTo({
    url: '/pages/add-friend'
  })
}

// 创建群聊
const createGroup = () => {
  console.log('创建群聊')
  showDropdown.value = false
  // 这里可以跳转到创建群聊页面
}

// 漂流瓶
const driftBottle = () => {
  console.log('漂流瓶')
  showDropdown.value = false
  
  // 跳转到漂流瓶页面
  uni.navigateTo({
    url: '/pages/drift-bottle'
  })
}

// 下拉刷新
const refreshConversations = async () => {
  await loadConversations()
}

// 打开聊天
const openChat = (chat: ChatItem) => {
  console.log('打开聊天:', chat.name, '会话ID:', chat.id)
  showDropdown.value = false // 关闭下拉菜单
  showDeleteDropdown.value = false // 关闭删除菜单
  
  // 跳转到聊天详情页面，传递会话ID和对方用户信息
  uni.navigateTo({
    url: `/pages/chat?conversationId=${chat.id}&otherUserId=${chat.otherUserId}&otherUserName=${encodeURIComponent(chat.name)}&otherUserAvatar=${encodeURIComponent(chat.avatar)}`
  })
}

// 显示删除菜单
const showDeleteMenu = (chat: ChatItem, event: any) => {
  console.log('长按会话:', chat.name)
  selectedChat.value = chat
  showDeleteDropdown.value = true
  showDropdown.value = false // 关闭其他下拉菜单
}

// 删除会话
const deleteConversation = async (chat: ChatItem) => {
  uni.showModal({
    title: '删除会话',
    content: `确定要删除与 ${chat.name} 的会话吗？删除后聊天记录将无法恢复。`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 显示加载提示
          uni.showLoading({
            title: '删除中...'
          })
          
          // 调用删除会话API
          const response = await MessageAPI.deleteConversation(chat.id)
          
          uni.hideLoading()
          
          if (response.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            
            // 从聊天列表中移除
            chatList.value = chatList.value.filter(c => c.id !== chat.id)
            
            // 关闭删除菜单
            showDeleteDropdown.value = false
            selectedChat.value = null
          } else {
            throw new Error(response.message || '删除失败')
          }
        } catch (error: any) {
          uni.hideLoading()
          console.error('删除会话失败:', error)
          
          uni.showToast({
            title: error.message || '删除失败，请重试',
            icon: 'none'
          })
        }
      }
      
      // 无论确认还是取消，都关闭删除菜单
      showDeleteDropdown.value = false
      selectedChat.value = null
    }
  })
}
</script>

<style scoped>
.message-container {
  height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

/* 个人信息区域 */
.user-info-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fafbfc;
  padding: 30rpx 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #e5e5e5;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.user-avatar {
  position: relative;
  margin-right: 24rpx;
}

.user-avatar .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: 3rpx solid #f0f0f0;
}

.online-status {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 20rpx;
  height: 20rpx;
  background-color: #52c41a;
  border-radius: 50%;
  border: 3rpx solid #ffffff;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.status {
  font-size: 24rpx;
  color: #52c41a;
}

.user-actions {
  position: relative;
  display: flex;
  align-items: center;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
}

.plus-icon {
  font-size: 36rpx;
  color: #007AFF;
  font-weight: bold;
  line-height: 1;
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 80rpx;
  right: 0;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1000;
  min-width: 230rpx;
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
}

.dropdown-item:active {
  background-color: #e9ecef;
}

.dropdown-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  width: 40rpx;
  text-align: center;
}

.dropdown-text {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  flex: 1;
}

/* 聊天列表 */
.chat-list {
  flex: 1;
  background-color: #ffffff;
  overflow-y: auto;
  margin-top: 140rpx;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.empty-hint {
  font-size: 28rpx;
  color: #999999;
}

/* 侧边栏样式 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sidebar {
  position: fixed;
  top: 0;
  right: -600rpx;
  width: 600rpx;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: -4rpx 0 16rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar-open {
  right: 0;
}

.sidebar-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80rpx 40rpx 40rpx;
  display: flex;
  align-items: center;
}

.sidebar-avatar {
  margin-right: 24rpx;
}

.sidebar-avatar .avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.sidebar-user-info {
  flex: 1;
}

.sidebar-username {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8rpx;
  display: block;
}

.sidebar-email {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.sidebar-content {
  flex: 1;
  padding: 40rpx 0;
}

.sidebar-item {
  padding: 32rpx 40rpx;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
  border-bottom: 1rpx solid #f5f5f5;
}

.sidebar-item:active {
  background-color: #f8f9fa;
}

.sidebar-item.logout {
  color: #ff4d4f;
  border-bottom: none;
  margin-top: auto;
}

.sidebar-item.logout:active {
  background-color: #fff2f0;
}

.sidebar-icon {
  font-size: 36rpx;
  margin-right: 24rpx;
  width: 48rpx;
  text-align: center;
}

.sidebar-text {
  flex: 1;
  font-size: 30rpx;
  color: #333333;
}

.sidebar-item.logout .sidebar-text {
  color: #ff4d4f;
}

.sidebar-arrow {
  font-size: 24rpx;
  color: #cccccc;
}

.sidebar-divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 20rpx 40rpx;
}

/* 聊天项样式 */
.chat-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
}

.chat-item:active {
  background-color: #f8f9fa;
}

.chat-avatar {
  position: relative;
  margin-right: 24rpx;
}

.chat-avatar .avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
}

.unread-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff4d4f;
  border-radius: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #ffffff;
}

.badge-text {
  font-size: 20rpx;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.chat-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
}

.chat-time {
  font-size: 24rpx;
  color: #999999;
}

.chat-preview {
  display: flex;
  align-items: center;
}

.last-message {
  font-size: 26rpx;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.empty-hint {
  font-size: 26rpx;
  color: #999999;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
}

.chat-item:hover {
  background-color: #f8f9fa;
}

.chat-item:active {
  background-color: #e9ecef;
}

.chat-avatar {
  position: relative;
  margin-right: 24rpx;
}

.chat-avatar .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.unread-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  min-width: 32rpx;
  height: 32rpx;
  background-color: #ff4d4f;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
}

.badge-text {
  font-size: 20rpx;
  color: #ffffff;
  font-weight: bold;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.chat-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-time {
  font-size: 22rpx;
  color: #999999;
  margin-left: 16rpx;
}

/* 删除菜单样式 */
.delete-menu {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 200rpx;
}

.delete-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  transition: background-color 0.2s;
}

.delete-item:active {
  background-color: #fff2f0;
}

.delete-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  color: #ff4d4f;
}

.delete-text {
  font-size: 28rpx;
  color: #ff4d4f;
  font-weight: 500;
}

/* 聊天项相对定位，为删除菜单提供定位基准 */
.chat-item {
  position: relative;
}

.chat-preview {
  display: flex;
  align-items: center;
}

.last-message {
  font-size: 26rpx;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
</style>